import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    visible: true
    width: 450
    height: 600
    title: qsTr("Hello World")

    Column {
        spacing: 10

        Rectangle {
            width: row.width + 10
            height: row.height + 10
            border.color: "darkgrey"
            // 行布局 - 按水平方向布局
            Row {
                id: row
                spacing: 5
                anchors.centerIn: parent
                // 排列布局方向
                // layoutDirection: Qt.LeftToRight
                Repeater {
                    model: 5
                    Square {}
                }
            }
        }

        Rectangle {
            width: col.width + 10
            height: col.height + 10
            border.color: "darkgrey"
            // 列布局 - 按垂直方向布局
            Column {
                id: col
                spacing: 5
                anchors.centerIn: parent
                Repeater {
                    model: 5
                    Square {}
                }
            }
        }

        Rectangle {
            width: grid.width + 10
            height: grid.height + 10
            border.color: "darkgrey"
            // 网格布局 - 按网格方向布局
            Grid {
                id: grid
                // 自动计算
                // rows: 2
                columns: 4
                spacing: 5
                anchors.centerIn: parent
                // 控制子元素的加入顺序
                // flow: Grid.TopToBottom
                Repeater {
                    model: 6
                    Square {}
                }
            }
        }

        Rectangle {
            width: 400
            height: 150
            border.color: "darkgrey"
            // 流布局 - 从头到脚的布局（方向）
            Flow {
                id: flow
                anchors.fill: parent
                anchors.margins: 15
                spacing: 5
                anchors.centerIn: parent
                // 控制子元素的加入方向
                flow: Flow.TopToBottom
                // 排列布局方向（扩散方向）
                layoutDirection: Qt.RightToLeft
                Repeater {
                    model: 13
                    Square {}
                }
            }
        }
    }
}
